<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-tabbar>
          <fu-tabbar-item
            v-for="(item, index) in list1"
            :key="index"
            :icon="item.icon"
            :activeIcon="item.activeIcon"
            :text="item.text"
            :active="active1 === index"
            @click="active1 = index"
          />
        </fu-tabbar>
      </view>
    </view>
    
    <!-- 自定义颜色 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义颜色</view>
      <view class="demo-block__content">
        <fu-tabbar>
          <fu-tabbar-item
            v-for="(item, index) in list2"
            :key="index"
            :icon="item.icon"
            :activeIcon="item.activeIcon"
            :text="item.text"
            :active="active2 === index"
            color="#999"
            active-color="#ff6b81"
            @click="active2 = index"
          />
        </fu-tabbar>
      </view>
    </view>
    
    <!-- 徽标提示 -->
    <view class="demo-block">
      <view class="demo-block__title">徽标提示</view>
      <view class="demo-block__content">
        <fu-tabbar>
          <fu-tabbar-item
            v-for="(item, index) in list3"
            :key="index"
            :icon="item.icon"
            :activeIcon="item.activeIcon"
            :text="item.text"
            :badge="item.badge"
            :dot="item.dot"
            :active="active3 === index"
            @click="active3 = index"
          />
        </fu-tabbar>
      </view>
    </view>
    
    <!-- 固定底部 -->
    <view class="demo-block">
      <view class="demo-block__title">固定底部</view>
      <view class="demo-block__content">
        <fu-tabbar
          fixed
          placeholder
        >
          <fu-tabbar-item
            v-for="(item, index) in list1"
            :key="index"
            :icon="item.icon"
            :activeIcon="item.activeIcon"
            :text="item.text"
            :active="active4 === index"
            @click="active4 = index"
          />
        </fu-tabbar>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active1: 0,
      active2: 0,
      active3: 0,
      active4: 0,
      list1: [
        {
          icon: '/static/tabbar/home.png',
          activeIcon: '/static/tabbar/home-active.png',
          text: '首页'
        },
        {
          icon: '/static/tabbar/cate.png',
          activeIcon: '/static/tabbar/cate-active.png',
          text: '分类'
        },
        {
          icon: '/static/tabbar/cart.png',
          activeIcon: '/static/tabbar/cart-active.png',
          text: '购物车'
        },
        {
          icon: '/static/tabbar/user.png',
          activeIcon: '/static/tabbar/user-active.png',
          text: '我的'
        }
      ],
      list2: [
        {
          icon: '&#xe6e3;',
          text: '首页'
        },
        {
          icon: '&#xe6e4;',
          text: '收藏'
        },
        {
          icon: '&#xe6e5;',
          text: '订单'
        }
      ],
      list3: [
        {
          icon: '&#xe6e3;',
          text: '首页'
        },
        {
          icon: '&#xe6e4;',
          text: '消息',
          badge: '99+'
        },
        {
          icon: '&#xe6e5;',
          text: '购物车',
          badge: '5'
        },
        {
          icon: '&#xe6e6;',
          text: '我的',
          dot: true
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
  padding-bottom: 200rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    position: relative;
    height: 200rpx;
    background-color: #fff;
    border-radius: var(--fu-radius-base);
  }
}
</style> 